<template>
  <div>
    <el-dialog
      title="客户信息"
      class="peopleSingleChoose"
      :visible.sync="dialogVisible"
      width="75%"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="12" style="height:650px">
          <pageCard :title-name="'公司信息'" :type="'smallTitle'">
            <div>
              <div class="topText">公司名称：</div>
              <el-input v-model="searchCompany.companyName" placeholder="请输入搜索内容" class="searchInput">
                <el-button slot="append" icon="el-icon-search" @click="searchCompanyClick" />
              </el-input>
              <el-button type="primary" plain class="topBtn" @click="companyAddClick()">新增</el-button>
            <!-- <el-button type="primary" class="topBtn" @click="submit">选择</el-button> -->
            </div>
            <myTable
              ref="companyTable"
              :row-key="'companyId'"
              :table-label="companyTableLabel"
              :table-data="companyTableData"
              :table-total-size="companyTableTotalSize"
              :search-data="searchCompanyData"
              @getTableData="getCompanyTableData"
              @rowClickChange="rowCompanyClickChange"
            />
            <pagination :table-total-size="companyTableTotalSize" :search-data="searchCompanyData" @getTableData="$refs.companyTable.getTableData()" />
          </pageCard>
        </el-col>
        <el-col :span="12" style="height:650px">
          <pageCard :title-name="'联系人信息'" :type="'smallTitle'">
            <div>
              <div class="topText">姓名：</div>
              <el-input v-model="searchPerson.personName" placeholder="请输入搜索内容" class="searchInput">
                <el-button slot="append" icon="el-icon-search" @click="searchPersonClick" />
              </el-input>
              <el-button type="primary" plain class="topBtn" @click="personAddClick()">新增</el-button>
            </div>
            <myTable
              ref="personTable"
              :row-key="'personId'"
              :table-label="personTableLabel"
              :table-data="personTableData"
              :table-total-size="personTableTotalSize"
              :search-data="searchPersonData"
              @rowClickChange="rowPersonClickChange"
              @getTableData="getPersonTableData"
            />
            <pagination :table-total-size="personTableTotalSize" :search-data="searchPersonData" @getTableData="$refs.personTable.getTableData()" />
          </pageCard>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="submit">选 择</el-button>
      </span>
    </el-dialog>
    <clientCompanyChoose v-if="companyChosseIndex" ref="clientCompanyChoose" @companySubmit="companySubmit" @closeCompanyDialog="closeCompanyDialog" />
    <clientPersonChoose v-if="personChosseIndex" ref="clientPersonChoose" @personSubmit="personSubmit" @closePersonDialog="closePersonDialog" />
  </div>
</template>
<script>
import pageCard from '@/components/page/pageCard'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
import { getClientCompany, getClientPerson } from '@/api/table'
import { addClientCompany, editClientCompany, addClientPerson, editClientPerson } from '@/api/system-management'
import clientCompanyChoose from '@/views/system-management/components/clientCompanyChoose'
import clientPersonChoose from '@/views/system-management/components/clientPersonChoose'
export default {
  name: 'ClientChoose',
  components: {
    pageCard,
    myTable,
    pagination,
    clientCompanyChoose,
    clientPersonChoose
  },
  data() {
    return {
      dialogVisible: false,
      companyChosseIndex: false,
      personChosseIndex: false,
      searchCompany: {
        companyName: ''
      },
      searchPerson: {
        personName: ''
      },
      // companyTable需要的数据
      companyTableData: [],
      companyTableLabel: [
        {
          type: 'expand'
        },
        // {
        //   type: 'selection',
        //   width: '55'
        // },
        {
          prop: 'companyName',
          label: '公司名称',
          width: 250,
          showOverflowTooltip: false
        },
        {
          prop: 'province',
          display: false,
          label: '省份',
          width: 98,
          showOverflowTooltip: false
        },
        {
          prop: 'city',
          display: false,
          label: '城市',
          width: 98,
          showOverflowTooltip: false
        },
        {
          prop: 'country',
          display: false,
          label: '区县',
          width: 98,
          showOverflowTooltip: false
        }
      ],
      companyTableTotalSize: null,
      searchCompanyData: {
        pageSize: 10,
        currentPage: 1,
        sort: {},
        params: {}
      },
      // personTable需要的数据
      personTableData: [],
      personTableLabel: [
        {
          type: 'expand'
        },
        // {
        //   type: 'selection',
        //   width: '55'
        // },
        {
          prop: 'personName',
          label: '联系人名称',
          width: 100,
          minWidth: 100,
          showOverflowTooltip: false
        },
        {
          prop: 'sex',
          label: '性别',
          width: 70,
          showOverflowTooltip: false
        },
        {
          prop: 'mobileTel',
          label: '移动电话',
          width: 114,
          showOverflowTooltip: false
        },
        {
          prop: 'email',
          label: '邮箱',
          width: 166,
          showOverflowTooltip: false
        },
        {
          prop: 'telephone',
          label: '电话',
          display: false,
          width: 114,
          showOverflowTooltip: false
        }
      ],
      personTableTotalSize: null,
      searchPersonData: {
        pageSize: 10,
        currentPage: 1,
        sort: {},
        params: {}
      },
      indexx: null, // formItem的index
      rowData: {
        companyData: { companyId: null, companyName: '' },
        personData: { personId: null, personName: '' }
      }
    }
  },
  methods: {
    // 进入此页面初始化函数
    is(indexx) {
      this.dialogVisible = true
      this.indexx = indexx
    },
    // 提交函数
    submit() {
      this.$emit('submit', this.indexx, this.rowData)
      this.handleClose()
    },
    // 关闭函数
    handleClose() {
      this.dialogVisible = false
    },
    // 点击公司行回调函数
    async rowCompanyClickChange(val) {
      this.rowData.companyData = val
      this.$refs.personTable.getTableData()
    },
    // 重新获取当前选中行的数据,公司
    resetCompanyCurrentRow(id) {
      for (const item of this.companyTableData) {
        if (id === item.companyId) {
          this.rowData.companyData = item
        }
      }
    },

    // 重新获取当前选中行的数据,联系人
    resetPersonCurrentRow(id) {
      for (const item of this.personTableData) {
        if (id === item.personId) {
          this.rowData.personData = item
        }
      }
    },
    // 获取公司表格数据
    getCompanyTableData(cab) {
      getClientCompany(this.searchCompanyData).then(res => {
        this.companyTableData = res.data
        this.companyTableTotalSize = res.total_count
        if (res.total_count === 0) {
          this.rowData.companyData = {}
        } else {
          this.resetCompanyCurrentRow(this.rowData.companyData.companyId)
        }
        cab(res.data)
      })
    },
    // 获取公司联系人表格数据
    getPersonTableData(cab) {
      if (this.rowData.companyData.companyId !== null) {
        this.searchPersonData.params['companyId'] = this.rowData.companyData.companyId
      }
      getClientPerson(this.searchPersonData).then(res => {
        this.personTableData = res.data
        this.personTableTotalSize = res.total_count
        if (res.total_count === 0) {
          this.rowData.personData = {}
        } else {
          this.resetPersonCurrentRow(this.rowData.companyData.personId)
        }
        cab(res.data)
        if (this.rowData.personData === null) {
          this.rowData.personData = this.personTableData[0]
          // this.$refs.personTable.$refs.tableComponent.setCurrentRow(this.personTableData[0])
        }
      })
    },
    // 初始化已选中行k
    // async initClickRow() {
    //   await this.$refs.personTable.getTableData()
    //   if (this.rowData.companyData === null) {
    //     this.rowData.companyData = this.companyTableData[0]
    //     this.$refs.companyTable.$refs.tableComponent.setCurrentRow(this.companyTableData[0])
    //   } else {
    //     this.$refs.companyTable.$refs.tableComponent.setCurrentRow(this.rowData.companyData)
    //     this.$refs.personTable.$refs.tableComponent.setCurrentRow(this.rowData.personData)
    //     await this.$refs.personTable.getTableData()
    //   }
    // },
    // initClickRow() {
    //   this.rowData.companyData = this.companyTableData[0]
    //   this.$refs.personTable.getTableData()
    // },
    // 点击联系人行回调函数
    rowPersonClickChange(val) {
      this.rowData.personData = val
    },
    // 搜索公司名称
    searchCompanyClick() {
      this.searchCompanyData.currentPage = 1
      this.searchCompanyData.params['companyName'] = this.searchCompany.companyName
      this.$refs.companyTable.getTableData()
    },
    // 搜索联系人名称
    searchPersonClick() {
      this.searchPersonData.currentPage = 1
      this.searchPersonData.params['personName'] = this.searchPerson.personName
      this.$refs.personTable.getTableData()
    },
    // 点击公司增加
    companyAddClick() {
      this.companyChosseIndex = true
      this.$nextTick(() => {
        this.$refs.clientCompanyChoose.is('add')
      })
    },
    // 点击联系人增加
    personAddClick() {
      this.personChosseIndex = true
      this.$nextTick(() => {
        this.$refs.clientPersonChoose.is('add')
      })
    },
    // 关闭公司弹窗
    closeCompanyDialog() {
      this.companyChosseIndex = false
    },
    // 提交公司
    companySubmit(data, type) {
      if (type === 'add') {
        addClientCompany(data).then(res => {
          this.$notify({
            title: '成功',
            message: '增加客户成功',
            type: 'success'
          })
          this.$refs.companyTable.getTableData()
        })
      } else {
        editClientCompany(data).then(res => {
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          })
          this.$refs.companyTable.getTableData()
        })
      }
    },
    // 关闭联系人弹窗
    closePersonDialog() {
      this.personChosseIndex = false
    },
    // 提交联系人
    personSubmit(data, type) {
      data['personType'] = 0
      if (type === 'add') {
        data['companyId'] = this.rowData.companyData.companyId
        addClientPerson(data).then(res => {
          this.$notify({
            title: '成功',
            message: '增加联系人成功',
            type: 'success'
          })
          this.$refs.personTable.getTableData()
        })
      } else {
        editClientPerson(data).then(res => {
          this.$notify({
            title: '成功',
            message: '更新联系人成功',
            type: 'success'
          })
          this.$refs.personTable.getTableData()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/pageTableTop.scss";
.peopleSingleChoose {
  /deep/ .el-dialog__body {
    padding: 0px;
  }
        /deep/ .el-dialog__title{
    font-size: 21px;
  }
  /deep/ .el-input-group__append {
    padding: 0px 10px;
  }
}
</style>
